<template>
	<view>
		<uni-nav-bar statusBar @clickLeft='clickLeft()' @clickRight="clickRight()" :border='border' color="#000000"
			fixed backgroundColor='#FFFFFF00' left-icon="left" :title="title">

		</uni-nav-bar>
		<view class="topView">
			<view class="topView1"></view>
			<view v-if='order_id' class="orderView">
			<!-- 	<view class="flex-row-space-between" style="height: 98rpx;">
					<view class="title">
						已选行程
					</view>
					<view class="flex-row-flex-end">
						<view class="title1">
							选择其他行程
						</view>
						<u-icon  name="arrow-right" color="#999"></u-icon>
					</view>
				</view>
				<view class="line">
					
				</view> -->
				<view class="title" style="height: 40rpx;">
					<!-- 已选行程 -->
				</view>
				<view class="time">
					{{data.order_time}}
				</view>
				<view class="flex-row-flex-start" style="margin-top: 20rpx;">
					<view class="circle1 ">
						
					</view>
					<view class="title2 flex1">
						{{data.start_address}}
					</view>
				</view>
				<view class="flex-row-flex-start" style="margin-top: 20rpx;">
					<view class="circle ">
						
					</view>
					<view class="title2 flex1">
						{{data.end_address}}
					</view>
				</view>
			</view>
			<view v-if='order_id' class="reasonView">
				<view class="title">
					选择反馈原因
				</view>
				<view class="flex-row-flex-start flex-wrap">
					<view v-for="(item,index) in config.complaint_list" :key="index">
						<view @click="reasonItemClick(index)" class="reasonItem flex-row-center" :class="[selectIndex==index?'selectReasonItem':'']">
							{{item}}
						</view>
					</view>
				</view>
				
			</view>
			<view  class="reasonView">
				<view class="title">
					<text >反馈原因</text>
				</view>
				<view class="textareaView">
					<textarea v-model="reason" maxlength="100" placeholder="请描述反馈原因"></textarea>
				</view>
				<view class="flex-row-flex-end">
					<view class="count">
						{{reason.length}}/100
					</view>
				</view>
				
			</view>
			<view class="reasonView">
				<view class="title">
					联系方式
				</view>
				<view class="inputView flex-row-flex-start">
					<input v-model="phone" type="number" placeholder="请输入联系手机号">
				</view>
			</view>
			
			<view @click="buttonClick()" class="button flex-row-center">
				提交
			</view>
			<view class="topView1"></view>
		</view>
	</view>
</template>

<script>
	import {
		getConfig,
		complaint,
		getOrderDetail
	} from '@/api/personalCenter.js'
	import {
		issueApply
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				phone:'',
				reason:'',
				list:[
					{
						name:'司机服务问题'
					},
					{
						name:'司机服务问题'
					},
					{
						name:'司机迟到'
					},
					{
						name:'司机未到达目的地'
					}
				],
				selectIndex:0,
				type:0,
				order_id:0,
				title: '投诉反馈',
				border: false,
				config:{},
				data:{}
			}
		},
		onShow() {

		},
		onLoad(e) {
			if (e.order_id) {
				this.order_id = e.order_id
				this.config = uni.getStorageSync('config')
				this.getConfig()
				this.getOrderDetail()
				// this.type=1
			}else{
				this.title='问题反馈'
			} 
			// if(e.type){
			// 	this.type=Number(e.type)
			// }
			// if(this.type){
			// 	this.title='问题反馈'
			// }

		},

		methods: {
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			getOrderDetail() {
				var that = this
				var data = {
					order_id: this.order_id
				}
				getOrderDetail(data)
					.then(res => {
						that.data = res.data
					})
			},
			getConfig(){
				
				getConfig().then(res => {
					this.config=res.data
					uni.setStorageSync('config', this.config)
				
					})
			},
			buttonClick(){
				if(!this.reason.length){
					this.showToast('请输入反馈原因')
					return
				}
				if(!this.phone.length){
					this.showToast('请输入联系方式')
					return
				}
				if(Number(this.order_id)){
					
					this.complaint()
				}else{
					
					this.issueApply()
				}
			},
			complaint(){
				var data={
					order_id:this.order_id,
					reason:this.config.complaint_list[this.selectIndex],
					content:this.reason,
					mobile:this.phone
				}
				complaint(data).then(res => {
					this.showToast(res.msg)
					    setTimeout(() => {
					         uni.navigateBack()
					                }, 2000)
					})
			},
			issueApply(){
				var data={
					content:this.reason,
					link_mobile:this.phone
				}
				issueApply(data).then(res => {
					this.showToast(res.msg)
					    setTimeout(() => {
					         uni.navigateBack()
					                }, 2000)
					})
			},
			reasonItemClick(index){
				this.selectIndex=index
			},
			clickLeft() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F5F6F7;
	}
.orderView{
	padding: 30rpx;
	padding-top: 0rpx;
	margin:0 30rpx;
	margin-top: 40rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
}
.title{
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	// font-weight: 500;
	color: #3D3D3D;
}
.line{
	margin: 0 ;
	height: 2rpx;
	background: #F5F6F7;
}
.title1{
	margin-right: 6rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
}
.time{
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #3D3D3D;
}
.circle{
	margin-right: 10rpx;
	width: 16rpx;
	height: 16rpx;
	background:#FF9500;
	opacity: 1;
	border-radius: 50%;
}
.circle1{
	margin-right: 10rpx;
	width: 16rpx;
	height: 16rpx;
	background:$base-color;
	opacity: 1;
	border-radius: 50%;
}
.title2{
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #3D3D3D;
}
.reasonView{
	padding: 30rpx;
	margin:0 30rpx;
	margin-top: 30rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
}
.reasonItem{
	margin-top: 20rpx;
	margin-right: 24rpx;
	padding: 0 16rpx;
	height: 56rpx;
	background: rgba(0,0,0,0.06);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	opacity: 1;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
}
.selectReasonItem{
	margin-top: 20rpx;
	margin-right: 24rpx;
	padding: 0 16rpx;
	height: 56rpx;
	background: $base-color;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	opacity: 1;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
}
.textareaView{
	padding: 16rpx;
	margin: 20rpx 0;
	margin-bottom: 0;
	height: 172rpx;
	background: #F5F6F7;
	border-radius: 6rpx 6rpx 6rpx 6rpx;
	opacity: 1;
	textarea{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
	}
}
.count{
	margin-right: 16rpx;
	margin-top: -60rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #AAAAAA;
}
.inputView{
	padding-left: 20rpx;
	margin: 20rpx 0;
	margin-bottom: 0;
	height: 90rpx;
	background: #F5F6F7;
	border-radius: 6rpx 6rpx 6rpx 6rpx;
	opacity: 1;
	input{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
	}
}
.button{
	margin: 50rpx 30rpx;
	height: 90rpx;
	background: #26D360;
	border-radius: 990rpx 990rpx 990rpx 990rpx;
	opacity: 1;
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
}
</style>
